import yesmola from "./index.module.css"
import React, { Component } from 'react'
import 'antd/dist/antd.css';

// import Zi from './Zi'

import axios from 'axios'

import {getRemove} from "../../api/Tou/Home"
import {getBannerImg} from "../../api/Tou/detail"
import {loginGet} from "../../api/Tou/login"

import { Table, Space ,Button,Popconfirm,Input,Alert } from 'antd';


export default class Tou extends Component {
  state = {
    xiangmu:{
      sheng:"",
      zong:"",
      shou:"",
      xiangmu:"",
      zhou:"",
      ren:"",
      // sheng:"辽宁省",
      // zong:25864,
      // shou:652,
      // xiangmu:"冰块",
      // zhou:"24个月",
      // ren:52
    },
    data : [],
    columns : [
    {
      title: '编号',
      dataIndex: 'bianhao',
      key: 'bianhao',
    },
    {
      title: '省份',
      dataIndex: 'sheng',
      key: 'sheng',
      // render: text => <a>{text}</a>,
    },
    {
      title: '投资总额',
      dataIndex: 'zong',
      key: 'zong',
    },
    {
      title: '收益金额',
      dataIndex: 'shou',
      key: 'shou',
    },
    {
      title: '主要投资项目',
      dataIndex: 'xiangmu',
      key: 'xiangmu',
    },
    {
      title: '投资周期',
      dataIndex: 'zhou',
      key: 'zhou',
    },
    {
      title: '投资人数',
      dataIndex: 'ren',
      key: 'ren',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={()=>this.bianji(record)}>编辑</Button>
          <Popconfirm
            placement="topRight"
            title="你确定要删除该条数据吗"
            onConfirm={()=>this.shanchu(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button type='danger'>删除</Button>
          </Popconfirm>
          {/* <a>Invite {record.name}</a> type='primary' */}
          {/* <a>Delete</a> */}
        </Space>
      ),
    },
  ]

  };
  async componentDidMount(){
    let arr = await getRemove()
    arr.data.forEach((item,index) => {
      item.bianhao = index+1
      item.key = index+1
    });
    this.setState({
      data:arr.data
    })
  }
  bianji(record){
    // console.log("record",record)
    this.setState({
      xiangmu:{...record}
    })
    this.meng.style="display: block;"
    this.xiu.style="display: inline-block;"
    this.tian.style="display: none;"
  }
  async shanchu(src){
    let arr = await getBannerImg({id:src})
    // axios({
    //   url:"http://10.35.166.207:8088/qushan",
    //   params:{
    //     id:src
    //   }
    // })
    if(arr.data=="shan"){
      let asd = this.state.data.filter((item)=>{
        return (item.id!=src)
        // {
        //   this.state.data.splice(index,1)
        // }
      })
      // console.log("asd",asd)
      asd.forEach((item,index) => {
        item.bianhao = index+1
        item.key = index+1
      });
      this.setState({
        data:[...asd]
      })
    }
  }
  async cha(){
    // this.refs.inputtext.state.value
    // console.log("this.inputtext",this.inputtext.state.value)
    let add = this.inputtext.state.value
    if(add){
      let arr = await loginGet({xiangmu:add})
      // axios({
      //   url:"http://10.35.166.207:8088/search",
      //   params:{
      //     xiangmu:add
      //   }
      // })
      if(arr.data){
        arr.data.forEach((item,index) => {
          item.bianhao = index+1
          item.key = index+1
        });
        this.setState({
          data:arr.data
        })
      }else{
        this.setState({
          data:arr.data
        })
      }
    }else{
      let arr = await axios({
        url:"http://10.35.166.207:8088/search"
      })
      arr.data.forEach((item,index) => {
        item.bianhao = index+1
        item.key = index+1
      });
      this.setState({
        data:arr.data
      })
    }
  }
  chashuju(){
    this.meng.style="display: block;"
    this.xiu.style="display: none;"
    this.tian.style="display: inline-block;"
  }
  quxiao(){
    this.meng.style="display: none;"
    this.setState({
      xiangmu:{
        sheng:"",
        zong:"",
        shou:"",
        xiangmu:"",
        zhou:"",
        ren:""
      }
    })
  }
  bianxieshuju(ev){
    // console.log("数据改变",ev.target.name)
    let sean = this.state.xiangmu
    this.setState({
      xiangmu:{
        ...sean,
        [ev.target.name]:ev.target.value
      },
    })
  }
  async shujucha(){
    // console.log(this.state.xiangmu.sheng)
    if(this.state.xiangmu.sheng  && this.state.xiangmu.zong  && this.state.xiangmu.shou  && this.state.xiangmu.xiangmu  && this.state.xiangmu.zhou  && this.state.xiangmu.ren ){
      // alert("")
      let arr = await axios({
        url:"http://10.35.166.207:8088/quzeng",
        params:{
          sheng:this.state.xiangmu.sheng,
          zong:this.state.xiangmu.zong,
          shou:this.state.xiangmu.shou,
          xiangmu:this.state.xiangmu.xiangmu,
          zhou:this.state.xiangmu.zhou,
          ren:this.state.xiangmu.ren
        }
      })
      if(arr.data == "dui"){
        let arr = await axios({
          url:"http://10.35.166.207:8088/search"
        })
        arr.data.forEach((item,index) => {
          item.bianhao = index+1
          item.key = index+1
        });
        this.setState({
          data:arr.data
        })
        this.xiaoque.style="display: block;"
        this.chali.style="display: block;"
        this.meng.style="display: none;"
      }
    }else{
      this.xiaoque.style="display: block;"
      this.kongli.style="display: block;"
    }
  }
  quxiaoxiao(){
    this.xiaoque.style="display: none;"
    this.chali.style="display: none;"
    this.kongli.style="display: none;"
    this.setState({
      xiangmu:{
        sheng:"",
        zong:"",
        shou:"",
        xiangmu:"",
        zhou:"",
        ren:""
      }
    })
  }
  async xiugaishuju(){
    if(this.state.xiangmu.sheng  && this.state.xiangmu.zong  && this.state.xiangmu.shou  && this.state.xiangmu.xiangmu  && this.state.xiangmu.zhou  && this.state.xiangmu.ren && this.state.xiangmu.id){
      // alert("")
      let arr = await axios({
        url:"http://10.35.166.207:8088/xiugai",
        params:{
          id:this.state.xiangmu.id,
          sheng:this.state.xiangmu.sheng,
          zong:this.state.xiangmu.zong,
          shou:this.state.xiangmu.shou,
          xiangmu:this.state.xiangmu.xiangmu,
          zhou:this.state.xiangmu.zhou,
          ren:this.state.xiangmu.ren
        }
      })
      if(arr.data){
        let arr = await axios({
          url:"http://10.35.166.207:8088/search"
        })
        arr.data.forEach((item,index) => {
          item.bianhao = index+1
          item.key = index+1
        });
        this.setState({
          data:arr.data
        })
        this.xiaoque.style="display: block;"
        this.chali.style="display: block;"
        this.meng.style="display: none;"
      }
    }else{
      this.xiaoque.style="display: block;"
      this.kongli.style="display: block;"
    }
  }
  render() {
    return (
      <div>
        <div className={yesmola.queren} ref={(ref)=>{this.xiaoque = ref}}>
          <div className={yesmola.querenbox}>
            <li className={yesmola.chali} ref={(ref)=>{this.chali = ref}}>插入成功</li>
            <li className={yesmola.kongli} ref={(ref)=>{this.kongli = ref}}>错误</li><br/>
            <Button type='danger' onClick={()=>this.quxiaoxiao()}>确认</Button>
          </div>
        </div>
        <div className={yesmola.mengbox} ref={(ref)=>{this.meng = ref}}>
          <div className={yesmola.dianjibox}>
            <li className={yesmola.pli}> 
              省份：<p className={yesmola.p}>
              <Input type="text" value={this.state.xiangmu.sheng} name="sheng" onChange={(ev)=>this.bianxieshuju(ev)}/></p>
            </li>
            <li className={yesmola.pli}> 
            投资总额：<p className={yesmola.p}>
              <Input type="text" value={this.state.xiangmu.zong} name="zong" onChange={(ev)=>this.bianxieshuju(ev)}/></p>
            </li>
            <li className={yesmola.pli}> 
            收益金额：<p className={yesmola.p}>
              <Input type="text" value={this.state.xiangmu.shou} name="shou" onChange={(ev)=>this.bianxieshuju(ev)}/></p>
            </li>
            <li className={yesmola.pli}> 
            投资项目：<p className={yesmola.p}>
              <Input type="text" value={this.state.xiangmu.xiangmu} name="xiangmu" onChange={(ev)=>this.bianxieshuju(ev)}/></p>
            </li>
            <li className={yesmola.pli}> 
            投资周期：<p className={yesmola.p}>
              <Input type="text" value={this.state.xiangmu.zhou} name="zhou" onChange={(ev)=>this.bianxieshuju(ev)}/></p>
            </li>
            <li className={yesmola.pli}> 
            投资人数：<p className={yesmola.p}>
              <Input type="text" value={this.state.xiangmu.ren} name="ren" onChange={(ev)=>this.bianxieshuju(ev)}/></p>
            </li>
            <div className={yesmola.pli}>
              <div ref={(ref)=>this.tian = ref}>
                <Button type='primary' onClick={()=>this.shujucha()} ref={(ref)=>{this.tianjia = ref}}>添加</Button>
              </div>
              <div ref={(ref)=>this.xiu = ref}>
                <Button type='primary' onClick={()=>this.xiugaishuju()} >确认修改</Button>
              </div>
              <Button type='danger' onClick={()=>this.quxiao()}>取消</Button>
            </div>
            {/* <Zi chuan={this.state.xiangmu} /> */}
          </div>
        </div>
        <div>
          <div className={yesmola.sousuo}>
            <Input type="text" ref={(ref)=>{this.inputtext = ref}} />
          </div><Button  onClick={()=>this.cha()}>查询投资项目</Button>
          <div className={yesmola.anniu}>
            <Button type='primary' onClick={()=>this.chashuju()}>添加项目</Button>
            {/* <Button type='danger'>批量删除</Button> */}
          </div>
        </div>
        <Table columns={this.state.columns} dataSource={this.state.data} />;
      </div>
    )
  }
}
